<template>
  <transition name="fade-slide" mode="out-in" appear>
    <div
      class="h-full rounded-12"
      :class="{ [`light-card`]: showBg && !appStore.isDeep, [`deep-card`]: appStore.isDeep }"
    >
      <slot />
    </div>
  </transition>
</template>
<script setup lang="jsx">
import { useAppStore } from '@/store'
defineOptions({
  name: 'MainCard',
})
const appStore = useAppStore()
defineProps({
  showBg: {
    type: Boolean,
    default: true,
  },
})
</script>
<style lang="scss" scoped>
.light-card {
  background: #fff;
  padding: 24px;
}
.deep-card {
  padding: 0 30px;
}
</style>
